<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>2D转换</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			border: 1px solid white;
			margin: 100px auto;
			text-align: center;
			line-height: 100px;
			transition:all 1s linear;
		}
		/**
		* translate(x , y)
		* x为正时向x轴正半轴偏移一定的量，为负数就向x轴负半轴偏移一定的量
		* y为正时向y轴正半轴偏移一定的量，为负数就向y轴负半轴偏移一定的量
		*/
		.box1{
			transform: translate(50px,50px);
		}

		/**
		* rotate(n)
		* n表示旋转的角度，如果为正就是顺时针旋转，如何为负就是逆时针旋转
		*	transform-origin: x y (z); 修改转换位置，默认值 50% 50% 0
		**/
		.box2{
			transform-origin: 0 0;
		}
		.box2:hover{
			transform: rotate(30deg);
		}

		/**
		* sclae(x , y)
		* x,y的值都是0~正无穷的范围，如果值为1就是原始大小
		**/
		.box3:hover{
			transform: scale(1.5,1.5);
		}

		/**
		* skew(x , y)
		* x为饶x轴旋转的角度
		**/
		.box4:hover{
			transform: skew(30deg,20deg);
		}
	</style>
</head>
<body>

	<div class="box1">
		这是一个div
	</div>
	<div class="box2">
		这是一个div
	</div>
	<div class="box3">
		这是一个div
	</div>
	<div class="box4">
		这是一个div
	</div>
</body>
</html>